<template>
  <div style="padding-top: 93px;">
    <div style="display: flex; justify-content: center">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="/Shop">热门商店</el-menu-item>
        <el-menu-item index="/MyCollect">我的收藏</el-menu-item>
        <el-menu-item index="/ShoppingCart">购物车</el-menu-item>
        <el-menu-item index="/OrderCenter">订单中心</el-menu-item>
      </el-menu>
    </div>
    <br>
    <div class="product-detail">
      <div class="product-image">
        <img :alt="product.name" :src="product.imageUrl"/>
      </div>
      <div class="product-info">
        <h1>{{ product.name }}</h1>
        <p class="price">¥{{ product.price.toFixed(2) }}</p>
        <p class="batch-no">批次号: {{ product.batchNo }}</p>
        <p class="status">状态: {{
            product.status === 0 ? '待审核' : product.status === 1 ? '已上架' : product.status === 2 ? '已下架' : ''
          }}</p>
        <div class="actions">
          <button class="favorite-btn" @click="toggleFavorite">
            <i class="icon-heart"></i> 收藏
          </button>
          <button class="add-to-cart-btn" @click="addToCart">
            <i class="icon-cart"></i> 加入购物车
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {addShoppingCart, collectProduct, queryProductById} from "@/api/request/ShopRequest";

export default {
  name: "ProductDetail",
  data() {
    return {
      id: this.$route.query.id,
      activeIndex: '/Shop',
      product: {
        price: 0.0,
      },
      userInfo: {}
    };
  },
  methods: {
    toggleFavorite() {
      if (!this.userInfo) {
        this.$message.error('请先登录')
        return
      }

      if (this.product.status !== 1) {
        this.$message.error('产品异常不能操作')
        return
      }

      this.$confirm('确定收藏吗？', '提示', {
        type: 'warning'
      }).then(() => {
        collectProduct({productId: this.id, userId: this.userInfo.id}).then((res) => {
          if (res.code != null) {
            if (res.code !== 200) {
              this.$message.error(res.msg)
              return
            }
          }

          this.$message.success('已收藏')
        })
      }).catch(() => {
      });
    },
    addToCart() {
      if (!this.userInfo) {
        this.$message.error('请先登录')
        return
      }

      if (this.product.status !== 1) {
        this.$message.error('产品异常不能操作')
        return
      }

      this.$confirm('确定加入购物车吗？', '提示', {
        type: 'warning'
      }).then(() => {
        addShoppingCart({productId: this.id, userId: this.userInfo.id}).then((res) => {
          if (res.code != null) {
            if (res.code !== 200) {
              this.$message.error(res.msg)
              return
            }
          }
          this.$message.success('已加入购物车')
        })
      }).catch(() => {
      });
    },
    getProductDetail() {
      queryProductById(this.id).then(res => {
        this.product = res
      })
    },
    handleSelect(key) {
      this.$router.push(key);
    },
  },
  mounted() {
    this.getProductDetail()
    this.userInfo = JSON.parse(localStorage.getItem('xm-user'))
  }
};
</script>

<style lang="scss" scoped>
.product-detail {
  background: url("@/assets/image/bj.png") no-repeat;
  background-size: contain;
  padding: 200px;
  display: flex;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #e0e0e0;
  font-family: 'Noto Serif SC', serif;
}

.product-image img {
  width: 400px;
  height: auto;
  border-radius: 8px;
  border: 2px solid #d4af37;
}

.product-info {
  margin-left: 30px;
  flex: 1;
}

.product-info h1 {
  font-size: 28px;
  margin-bottom: 15px;
  color: #333;
}

.product-info .price {
  font-size: 24px;
  color: #d4af37;
  margin-bottom: 15px;
}

.product-info .batch-no,
.product-info .status {
  font-size: 16px;
  color: #666;
  margin-bottom: 15px;
}

.actions {
  margin-top: 25px;
}

.actions button {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  margin-right: 15px;
  display: flex;
  align-items: center;
  transition: background-color 0.3s ease;
}

.favorite-btn {
  background-color: #d4af37;
  color: white;
}

.add-to-cart-btn {
  background-color: #8b4513;
  color: white;
}

.favorite-btn:hover {
  background-color: #b8860b;
}

.add-to-cart-btn:hover {
  background-color: #654321;
}

.icon-heart,
.icon-cart {
  margin-right: 8px;
  font-size: 20px;
}
</style>
